<!--设备配置-->
<template>
  <div class="app-container">
    <div class="title">{{ device.deviceName }}</div>
    <el-tabs tab-position="left">
      <el-tab-pane label="流程地址">
        <process-address :device="device"/>
      </el-tab-pane>
      <el-tab-pane label="报警地址">
        <alarm-address :device="device"/>
      </el-tab-pane>
      <el-tab-pane label="参数地址">
        <process-parameter :device="device"/>
      </el-tab-pane>
      <el-tab-pane label="数据地址">
        <data-address :device="device"/>
      </el-tab-pane>
      <el-tab-pane label="曲线地址">
        <surved-Address :device="device"/>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>

import {getDevice} from '@/api/mes/device';

import processAddress from '@/views/mes/device/process_address.vue';
import alarmAddress from '@/views/mes/device/alarm_address.vue';
import processParameter from '@/views/mes/device/process_parameter.vue';
import dataAddress from '@/views/mes/device/data_address.vue';
import survedAddress from '@/views/mes/device/surved_address.vue';


export default {
  name: "Config",
  components: {processAddress, alarmAddress, processParameter, dataAddress,survedAddress},
  data() {
    return {
      device: {}
    }
  },
  created() {
    const deviceId = this.$route.params && this.$route.params.deviceId
    this.deviceId = parseInt(deviceId)
    this.findDevice(deviceId)
  },
  methods: {
    findDevice(id) {
      getDevice(id).then(response => {
        this.device = response.data
      })
    }
  }
}
</script>


<style scoped lang="scss">
.title {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-size: 20px;
  color: #1890ff;
  text-indent: 18px;
}
</style>
